﻿@model SKeeper.Application.ViewModels.Invoice.InvoiceViewModel

@{
    ViewBag.Title = "Add";
}

<h2>Add</h2>


@using (Html.BeginForm())
{
    @Html.HiddenFor(x => x.WarehouseId)

    @*@Html.AntiForgeryToken()*@

    <div class="form-horizontal">
        <h4>InvoiceViewModel</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.Code, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Code, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Code, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.CreateDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CreateDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CreateDate, "", new { @class = "text-danger" })
            </div>
        </div>
        <div class="form-group">
            @Html.LabelFor(model => model.DueDate, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.DueDate, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.DueDate, "", new { @class = "text-danger" })
            </div>
        </div>
        

        <div class="form-group">
            @Html.LabelFor(model => model.IsActive, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.EditorFor(model => model.IsActive)
                    @Html.ValidationMessageFor(model => model.IsActive, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <td>
                            Продукт
                        </td>
                        <td>
                            Количина
                        </td>
                        <td>
                            Набавна цена
                        </td>
                        <td>
                            Цена парче
                        </td>
                        <td>
                            Цена со данок
                        </td>
                        <td>
                            Додади
                        </td>
                    </tr>
                </thead>
                <tbody data-bind="foreach:items">
                    <tr>
                        <td>
                            <span data-bind="text: name"></span>
                            <input type="hidden" data-bind="attr:{'name':'Items[' + $index() + '].InvoiceId'}" value="@Model.Id" />
                            <input type="hidden" data-bind="attr:{'name':'Items[' + $index() + '].ItemId', value:itemId}" />
                            <input type="hidden" data-bind="attr:{'name':'Items[' + $index() + '].Name', value: name}" />
                            <input type="hidden" data-bind="attr:{'name':'Items[' + $index() + '].Price', value: price}" />
                            <input type="hidden" data-bind="attr:{'name':'Items[' + $index() + '].Quantity', value: quantity}" />
                        </td>
                        <td><span data-bind="text: quantity"></span></td>
                        <td><span data-bind="text: price"></span></td>
                        <td><span data-bind="text: singlePrice"></span></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr data-bind="with:newItem">
                        <td>
                            <select data-bind="value:name">
                                @foreach(var item in Model.CompanyItems)
                                {
                                    <option value="@item.Id,@item.Name">@item.Name</option>
                                }
                            </select>


                           @*<input data-bind="value:name" />*@
                        </td>
                        <td><input data-bind="value:quantity" /></td>
                        <td><input data-bind="value:price" /></td>
                        <td><input data-bind="value: singlePrice"/></td>
                        <td><span data-bind="text: priceTax"></span></td>
                        <td><button data-bind="click:$parent.add" class="btn btn-success">Додади</button></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section scripts{
<script src="~/Scripts/knockout-3.4.0.js"></script>
<script>
    

    $(function () {
        var Item = function (name, price, quantity, itemId) {

            var self = this;

            this.id = ko.observable(0);
            this.itemId = ko.observable(itemId);
            this.name = ko.observable(name);
            this.price = ko.observable(price);
            this.quantity = ko.observable(quantity);

            
            this.singlePrice = ko.computed(function () {
                var price = parseFloat(this.price()),
                    quantity = parseFloat(this.quantity());
                
                return price / quantity  || 0;
            }, this);

            this.priceTax = ko.computed(function () {
                var price = parseFloat(this.price()),
                    quantity = parseFloat(this.quantity());

                return parseInt(self.price()) + parseInt(self.price()) * 0.18 || '';
            }, this);
        }
        
        var ViewModel = function () {
            var self = this;
            this.items = ko.observableArray([]);

            this.newItem = ko.observable(new Item('', '', ''));

            this.add = function (elem) {
                var splitedName = self.newItem().name().split(',');
                //console.log(splitedName);
                //
                //self.newItem().itemId(splitedName[0]);
                //self.newItem().name(splitedName[1]);
                //
                //console.log(self.newItem().name());

                var itemId = splitedName[0];
                var name = splitedName[1];
                

                self.items.push(new Item(name, elem.price(), elem.quantity(), itemId));
                self.newItem(new Item('', '', '', ''));
            }

        }

        ko.applyBindings(new ViewModel());
    });
</script>
    }